import React from "react"
import {Chart, Geom, Axis, Tooltip, Legend,} from "bizcharts"
import DataSet from "@antv/data-set"

export default class Line extends React.Component {
    render() {
        const data = [
            {
                month: "Jan",
                a: 7.0,
                b: 3.9,
                c: 5.9
            },
            {
                month: "Feb",
                a: 6.9,
                b: 4.2,
                c: 1.9
            },
            {
                month: "Mar",
                a: 9.5,
                b: 5.7,
                c: 3.9
            },
            {
                month: "Apr",
                a: 14.5,
                b: 8.5,
                c: 5.5
            },
            {
                month: "May",
                a: 18.4,
                b: 11.9,
                c: 8.9
            },
            {
                month: "Jun",
                a: 21.5,
                b: 15.2,
                c: 10.0
            },
            {
                month: "Jul",
                a: 25.2,
                b: 17.0,
                c: 12.9
            },
            {
                month: "Aug",
                a: 26.5,
                b: 16.6,
                c: 15.9
            },
            {
                month: "Sep",
                a: 23.3,
                b: 14.2,
                c: 20.7
            },
            {
                month: "Oct",
                a: 18.3,
                b: 10.3,
                c: 25.9
            },
            {
                month: "Nov",
                a: 13.9,
                b: 6.6,
                c: 30.9
            },
            {
                month: "Dec",
                a: 9.6,
                b: 4.8,
                c: 35.9
            }
        ]
        const ds = new DataSet()
        const dv = ds.createView().source(data)
        dv.transform(
            {
                type: "fold",
                fields: ["a", "b", "c"],
                key: "city",
                value: "temperature"
            }
        )
        const cols = {
            month: {
                range: [0, 1]
            }
        }
        return (
            <div style={{float: 'right', width: 750, height: 300}}>
                <Chart height={250} data={dv} scale={cols} forceFit>
                    <Legend/>
                    <Axis name="month"/>
                    <Axis name="temperature" label={{formatter: val => `${val}万个`}}/>
                    <Tooltip crosshairs={{type: "y"}}/>
                    <Geom type="line" position="month*temperature" size={2} color={"city"} shape={"smooth"}/>
                    <Geom type="point" position="month*temperature" size={4} shape={"circle"} color={"city"}
                          style={{stroke: "#fff", lineWidth: 1}}/>
                </Chart>
            </div>
        )
    }
}